<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v3.0.0-rc.0
* @link https://coreui.io
* Copyright (c) 2020 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->
<html lang="zh-CN">
<head>
    <!--<base href="./">-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>CoreUI & Vue CRUD Demo</title>
    <link rel="apple-touch-icon" sizes="57x57" href="assets/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
    <link href="vendors/@coreui/icons/css/free.min.css" rel="stylesheet">
    <!-- <link href="vendors/bootstrap/bootstrap.min.css" rel="stylesheet"> -->
    <link href="vendors/select2/select2.min.css" rel="stylesheet">
    <link href="vendors/select2/select2-coreui.min.css" rel="stylesheet">
    <link href="vendors/date-range-picker/date-range-picker.min.css" rel="stylesheet">
    <link href="vendors/bootstrap-submenu/bootstrap-submenu.min.css" rel="stylesheet">
    <link href="vendors/city-picker/css/city-picker.css" rel="stylesheet" type="text/css"/>
    <link href="vendors/toastr/toastr.min.css" rel="stylesheet">
</head>

<body class="c-app">

<div class="c-wrapper c-fixed-components">
    <header class="c-header c-header-light c-header-fixed c-header-with-subheader">
        <ul class="c-header-nav d-md-down-none">
            <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Dashboard</a></li>
            <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Users</a></li>
            <li class="c-header-nav-item px-3"><a class="c-header-nav-link" href="#">Settings</a></li>
        </ul>
        <ul class="c-header-nav ml-auto mr-4">
            <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
                <svg class="c-icon">
                    <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-bell"></use>
                </svg>
            </a></li>
            <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
                <svg class="c-icon">
                    <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-list-rich"></use>
                </svg>
            </a></li>
            <li class="c-header-nav-item d-md-down-none mx-2"><a class="c-header-nav-link" href="#">
                <svg class="c-icon">
                    <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-envelope-open"></use>
                </svg>
            </a></li>
            <li class="c-header-nav-item dropdown"><a class="c-header-nav-link" data-toggle="dropdown" href="#"
                                                      role="button" aria-haspopup="true" aria-expanded="false">
                <div class="c-avatar"><img class="c-avatar-img" src="assets/img/avatars/6.jpg" alt="user@email.com">
                </div>
            </a>
                <div class="dropdown-menu dropdown-menu-right pt-0">
                    <div class="dropdown-header bg-light py-2"><strong>Account</strong></div>
                    <a class="dropdown-item" href="#">
                        <svg class="c-icon mr-2">
                            <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-bell"></use>
                        </svg>
                        Updates<span class="badge badge-info ml-auto">42</span></a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-envelope-open"></use>
                    </svg>
                    Messages<span class="badge badge-success ml-auto">42</span></a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-task"></use>
                    </svg>
                    Tasks<span class="badge badge-danger ml-auto">42</span></a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-comment-square"></use>
                    </svg>
                    Comments<span class="badge badge-warning ml-auto">42</span></a>
                    <div class="dropdown-header bg-light py-2"><strong>Settings</strong></div>
                    <a class="dropdown-item" href="#">
                        <svg class="c-icon mr-2">
                            <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-user"></use>
                        </svg>
                        Profile</a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-settings"></use>
                    </svg>
                    Settings</a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-credit-card"></use>
                    </svg>
                    Payments<span class="badge badge-secondary ml-auto">42</span></a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-file"></use>
                    </svg>
                    Projects<span class="badge badge-primary ml-auto">42</span></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">
                        <svg class="c-icon mr-2">
                            <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-lock-locked"></use>
                        </svg>
                        Lock Account</a><a class="dropdown-item" href="#">
                    <svg class="c-icon mr-2">
                        <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-account-logout"></use>
                    </svg>
                    Logout</a>
                </div>
            </li>
        </ul>
    </header>
    <div class="c-body">
        <main class="c-main">
            <div class="container-fluid">
                <div class="fade-in">
                    <div class="row">
                        <div class="col-2">
                            <div class="form-group mb-0">
                                <!--                                <label for="keyword" >关键词</label>-->
                                <input class="form-control" type="text" title="文本值" id="keyword">
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group  mb-0">
                                <div id="distpicker" class="row">
                                    <div class="form-group">
                                        <div style="position: relative;">
                                            <input id="city-picker" class="form-control" readonly type="text"
                                                   value="广东省/广州市/黄埔区" data-toggle="city-picker">
                                        </div>
                                    </div>
                                    <div class="form-group d-flex pl-1 align-items-center">
                                        <button class="btn btn-outline-primary btn-sm" id="city-destroy"
                                                type="button">确定
                                        </button>
                                        &nbsp;
                                        <button class="btn btn-outline-info btn-sm" id="city-reset"
                                                type="button">重置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group  mb-0">
                                <!--                            <label for="years">年</label>-->
                                <input class="form-control date-range-picker" type="text" id="datetime"
                                       name="date-input" placeholder="时间段">
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group  mb-0">
                                <!--                            <label for="statistics">统计类型</label>-->
                                <select class="multiple-select-picker form-control-sm" title="请选择联系方式"
                                        multiple="" id="contactOptions">
                                    <option value="qq">QQ</option>
                                    <option value="email">EMail</option>
                                    <option value="mobile">手机</option>
                                    <option value="weixin">微信</option>
                                    <option value="dingding">钉钉</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="d-flex justify-content-center align-items-center">
                                <!--<span class="input-group-addon"  id="query"><a href="#"><i class="fa fa-search"></i></a></span>-->
                                <button class="btn btn-outline-primary" type="button" onclick="query()">
                                    <i class="c-icon cil-magnifying-glass"></i>
                                </button>

                            </div>
                        </div>
                    </div>
                    <div class="card" id="items-manager" v-cloak="">
                        <div class="card-header">
                            <i class="c-icon cil-applications"></i> <span class="lead">资源管理</span>
                            <div class="card-header-actions">
                                <a class="btn btn-ghost-info" @click="showAddModal()">
                                    <i class="c-icon cil-playlist-add"></i> &nbsp;新增
                                </a>
                                <a class="btn btn-ghost-danger" @click="showDelModal()">
                                    <i class="c-icon cil-trash"></i> &nbsp;删除
                                </a>
                            </div>
                        </div>
                        <div class="card-body">

                            <table class="table table-responsive-sm table-bordered  table-hover  table-sm">
                                <thead>
                                <tr>
                                    <th style="width: 10px">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox"
                                                   name="checkAll" id="checkAll">
                                            <label class="form-check-label" for="checkAll"></label>
                                        </div>
                                    </th>
                                    <th>头像</th>
                                    <th>文本</th>
                                    <th>描述</th>
                                    <th>数值</th>
                                    <th>联系方式</th>
                                    <th>地址</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th style="width: 140px">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in pageItems">
                                    <td>
                                        <div class="form-check form-check-inline">
                                            <!--  data-action="do-check"
                                                          v-bind:data-argument="startIndex+index" -->
                                            <input class="form-check-input" type="checkbox"
                                            >
                                            {{index+1}}
                                            <label class="form-check-label"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <img v-bind:src="item.image"/>
                                    </td>
                                    <td>
                                        {{item.text}}
                                    </td>
                                    <td v-html="item.description">

                                    </td>
                                    <td>
                                        {{item.number}}
                                    </td>
                                    <td>
                                        {{item.contacts}}
                                    </td>
                                    <td>
                                        <!--{{item.address.province}}-->
                                        {{item.address}}
                                    </td>
                                    <td>
                                        <!-- FIXIT 无效转有效有问题 -->
                                        <span class="badge badge-danger" v-if="item.deleted">无效</span>
                                        <span class="badge badge-success" v-else>有效</span>
                                    </td>
                                    <td>
                                        {{item.createTime}}
                                    </td>
                                    <td>
                                        <a class="btn btn-outline-success btn-sm" @click="showMoreModal(item)">
                                            <i class="c-icon cil-description"></i>
                                        </a>&nbsp;
                                        <a class="btn btn-outline-info btn-sm" @click="showEditModal(item)">
                                            <i class="c-icon cil-pencil"></i>
                                        </a>&nbsp;
                                        <a id="remove" class="btn btn-outline-danger btn-sm" data-index="index" @click="showDelModal(item)">
                                            <i class="c-icon cil-x"></i>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <!-- /.modal #form-modal -->
                            <div class="modal " id="form-modal" data-backdrop="static" tabindex="-1"
                                 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-info modal-lg" role="document" id="item-modal">
                                    <div class="modal-content">
                                        <form id="item-form" class="needs-validation" novalidate="">
                                            <div class="modal-header">
                                                <h4 class="modal-title">Item信息</h4>
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                    <span aria-hidden="true">×</span>
                                                </button>
                                            </div>

                                            <div class="modal-body justify-content-center">

                                                <div class="container-fluid">
                                                    <!--<div class="row col-12">-->
                                                    <div class="form-group row">
                                                        <label
                                                                class="col-sm-3 col-form-label">头像</label>
                                                        <div class="col-sm-9">
                                                            <img v-model:src="editItem.image" height="50" width="50"/>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="username"
                                                               class="col-sm-3 col-form-label">文本值</label>
                                                        <div class="col-sm-9">
                                                            <!-- pattern="^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$" -->
                                                            <input class="form-control" type="text" v-model="editItem.text"
                                                                   id="username" placeholder="文本值"
                                                                   required=""
                                                                   pattern="^([-a-zA-Z0-9_\u4e00-\u9fa5]{2,16})$"
                                                                   title="">
                                                            <small class="form-text text-muted">
                                                                文本值规则：必须以英文字母或中文字符开头，2~16个字符（中文、字母、数字、_或-）
                                                            </small>
                                                            <em class="error invalid-feedback">文本值不符合规则</em>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="description"
                                                               class="col-sm-3 col-form-label">description</label>
                                                        <div class="col-sm-9">
                                                            <input class="form-control" type="text" v-model:v-html="editItem.description"
                                                                   id="description"

                                                                   placeholder="富文本">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="number"
                                                               class="col-sm-3 col-form-label">数值</label>
                                                        <div class="col-sm-9">
                                                            <input class="form-control" type="text" id="number" v-model="editItem.number"

                                                                   placeholder="数值数据">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="contacts"
                                                               class="col-sm-3 col-form-label">联系方式</label>
                                                        <div class="col-sm-9">
                                                                    <textarea class="form-control" type="text" v-model="editItem.contacts"
                                                                              id="contacts"

                                                                              placeholder="JSON格式-联系方式">
                                                                    </textarea>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="province"
                                                               class="col-sm-3 col-form-label">地址</label>
                                                        <div class="col-sm-9">
                                                            <input class="form-control" type="text" v-model="editItem.address.province"
                                                                   id="province" placeholder="省"
                                                            >
                                                            <input class="form-control" type="text" v-model="editItem.address.city"
                                                                   placeholder="市"
                                                            >
                                                            <input class="form-control" type="text" v-model="editItem.address.county"
                                                                   placeholder="县(区)"
                                                            >
                                                            <input class="form-control" type="text" v-model="editItem.address.street"
                                                                   placeholder="街道"
                                                            >

                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="createTime"
                                                               class="col-sm-3 col-form-label">创建时间</label>
                                                        <div class="col-sm-9">
                                                            <input class="form-control" type="text" v-model="editItem.createTime"
                                                                   id="createTime"

                                                                   placeholder="日期时间">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="status-active"
                                                               class="col-sm-3 col-form-label">状态</label>
                                                        <div class="col-sm-9">
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" v-model="editItem.deleted"

                                                                       name="inlineRadioOptions"
                                                                       id="status-active" value=true>
                                                                <label class="form-check-label"
                                                                       for="status-active">无效</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" v-model="editItem.deleted"

                                                                       name="inlineRadioOptions"
                                                                       id="status-forbidden" value=false>
                                                                <label class="form-check-label"
                                                                       for="status-forbidden">有效</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>

                                                <!--</div>-->
                                            </div>

                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-info" @click="save(editItem)">
                                                    保存
                                                </button>
                                                <button type="button" data-dismiss="modal"
                                                        class="btn btn-secondary">
                                                    取消
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal #confirm-modal -->
                            <div class="modal " id="confirm-modal" data-backdrop="static" tabindex="-1"
                                 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog  modal-danger" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="confirm-modal-title">危险</h4>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body font-weight-bold" id="confirm-modal-content">
                                            记录删除后将无法恢复!确定要删除吗？
                                        </div>
                                        <div class="modal-footer">
                                            <input type="hidden" id="itemIds">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal" @click="remove()"
                                            >
                                                确定
                                            </button>
                                            <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">
                                                取消
                                            </button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal #detail-modal -->
                            <div class="modal " id="detail-modal" data-backdrop="static" tabindex="-1"
                                 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog  modal-success  modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">详细信息</h4>
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <table>
                                                <thead>
                                                <tr>
                                                    <th>属性</th>
                                                    <th>值</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>
                                                        属性名称
                                                    </td>
                                                    <td>
                                                        属性值
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-success" data-dismiss="modal">
                                                确定
                                            </button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row justify-content-between">
                                <div class="col-lg-2 col-sm-6">
                                    <div class="form-group form-inline">
                                        显示&nbsp;
                                        <select class="custom-select" v-model="paging.pageSize">
                                            <option value="5">5</option>
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                        &nbsp;项/页
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <nav aria-label="Page navigation">
                                        <ul class="pagination">
                                            <li class="page-item" :class="num==paging.pageIndex+1?'active':''" v-for="num in totalPage">
                                                <a class="page-link" @click="paging.pageIndex=num-1">{{num}}</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="c-footer">
            <div><a href="http://www.gzcc.cn">GCC</a> © 2020 HeWenhai.</div>
            <div class="ml-auto">Powered by&nbsp;<a href="https://coreui.io/">CoreUI</a></div>
        </footer>
    </div>
</div>
<!-- CoreUI and necessary plugins-->
<script src="vendors/@coreui/coreui/js/coreui.bundle.min.js"></script>
<!--[if IE]><!-->
<script src="vendors/@coreui/icons/js/svgxuse.min.js"></script>
<!--<![endif]-->

<script src="vendors/jquery/jquery-3.4.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.min.js"></script>
<script src="vendors/moment/moment.min.js"></script>
<script src="vendors/lodash/lodash.min.js"></script>

<script src="vendors/toastr/toastr.min.js"></script>
<script src="vendors/select2/select2.min.js"></script>
<script src="vendors/date-range-picker/date-range-picker.js"></script>
<script src="vendors/city-picker/js/city-picker.data.js"></script>
<script src="vendors/city-picker/js/city-picker.js"></script>
<script src="vendors/vue/vue.global.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script src="https://unpkg.com/vue@next"></script>-->
<script>

    var items=[];
    axios.get('/items')
        .then(function (response) {
            itemsVM.items=response.data
            // handle success
            console.log(response);
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })

    // var items = [
    //     {
    //         "id": 29,
    //         "deleted": true,
    //         "createTime": "2020-06-07 13:18:04",
    //         "updateTime": "2020-06-07 13:18:04",
    //         "image": "assets/img/avatars/1.jpg",
    //         "text": "Vue-Boots",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"email\": \"abc@hello.com\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道1号"
    //         }
    //     },
    //     {
    //         "id": 28,
    //         "deleted": false,
    //         "createTime": "2020-04-04 09:48:41",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/3.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"mobile\": \"13612345678\", \"weixin\": \"987234\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道1号"
    //         }
    //     },
    //     {
    //         "id": 25,
    //         "deleted": true,
    //         "createTime": "2020-03-24 11:16:39",
    //         "updateTime": "2020-06-01 11:16:39",
    //         "image": "assets/img/avatars/5.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"email\": \"abc@hello.com\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道1号"
    //         }
    //     },
    //     {
    //         "id": 24,
    //         "deleted": false,
    //         "createTime": "2020-03-23 22:37:14",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "New-ONE",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"email\": \"abc@hello.com\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "增城区",
    //             "street": "增江大道1号"
    //         }
    //     },
    //     {
    //         "id": 23,
    //         "deleted": false,
    //         "createTime": "2020-03-24 06:37:14",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/4.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "开放大道1号"
    //         }
    //     },
    //     {
    //         "id": 22,
    //         "deleted": false,
    //         "createTime": "2020-03-18 02:45:50",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/5.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"mobile\": \"136\", \"weixin\": \"123456\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "天河区",
    //             "street": "天河大道1号"
    //         }
    //     },
    //     {
    //         "id": 21,
    //         "deleted": false,
    //         "createTime": "2020-03-18 02:45:50",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/6.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "海珠区",
    //             "street": "海珠大道1号"
    //         }
    //     },
    //     {
    //         "id": 19,
    //         "deleted": false,
    //         "createTime": "2020-03-18 02:45:50",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/1.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"email\": \"abc@hello.com\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "番禺区",
    //             "street": "番禺大道1号"
    //         }
    //     },
    //     {
    //         "id": 18,
    //         "deleted": false,
    //         "createTime": "2020-03-18 02:45:50",
    //         "updateTime": "2020-06-18 02:45:50",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"email\": \"abc@hello.com\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "白云区",
    //             "street": "白云大道1号"
    //         }
    //     },
    //     {
    //         "id": 13,
    //         "deleted": false,
    //         "createTime": "2020-03-16 21:46:19",
    //         "updateTime": "2020-06-16 21:46:19",
    //         "image": "assets/img/avatars/3.jpg",
    //         "text": "NEW-TWO",
    //         "description": "<strong>Description information</strong>",
    //         "number": 9.876543211234568E8,
    //         "contacts": "{\"qq\": \"123456007\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "越秀区",
    //             "street": "中山大道1号"
    //         }
    //     },
    //     {
    //         "id": 12,
    //         "deleted": false,
    //         "createTime": "2020-03-17 05:31:33",
    //         "updateTime": "2020-05-17 05:31:33",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "New-ONE",
    //         "description": "<strong>Description information</strong>",
    //         "number": 1.2345678912345679E8,
    //         "contacts": "{\"mobile\": \"13812345678\", \"weixin\": \"987234\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道8号"
    //         }
    //     },
    //     {
    //         "id": 11,
    //         "deleted": false,
    //         "createTime": "2020-03-17 05:31:33",
    //         "updateTime": "2020-05-17 05:31:33",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "New-ONE",
    //         "description": "<strong>Description information</strong>",
    //         "number": 1.2345678912345679E8,
    //         "contacts": "{\"mobile\": \"13812345678\", \"weixin\": \"987234\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道8号"
    //         }
    //     },
    //     {
    //         "id": 10,
    //         "deleted": false,
    //         "createTime": "2020-03-17 05:31:33",
    //         "updateTime": "2020-05-17 05:31:33",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "New-ONE",
    //         "description": "<strong>Description information</strong>",
    //         "number": 1.2345678912345679E8,
    //         "contacts": "{\"mobile\": \"13812345678\", \"weixin\": \"987234\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道8号"
    //         }
    //     },
    //     {
    //         "id": 29,
    //         "deleted": false,
    //         "createTime": "2020-06-07 13:18:04",
    //         "updateTime": "2020-06-07 13:18:04",
    //         "image": "assets/img/avatars/1.jpg",
    //         "text": "Vue-Boots",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"email\": \"abc@hello.com\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道1号"
    //         }
    //     },
    //     {
    //         "id": 28,
    //         "deleted": false,
    //         "createTime": "2020-04-04 09:48:41",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/3.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"mobile\": \"13612345678\", \"weixin\": \"987234\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道1号"
    //         }
    //     },
    //     {
    //         "id": 25,
    //         "deleted": false,
    //         "createTime": "2020-03-24 11:16:39",
    //         "updateTime": "2020-06-01 11:16:39",
    //         "image": "assets/img/avatars/5.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"email\": \"abc@hello.com\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道1号"
    //         }
    //     },
    //     {
    //         "id": 24,
    //         "deleted": false,
    //         "createTime": "2020-03-23 22:37:14",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "New-ONE",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"email\": \"abc@hello.com\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "增城区",
    //             "street": "增江大道1号"
    //         }
    //     },
    //     {
    //         "id": 23,
    //         "deleted": false,
    //         "createTime": "2020-03-24 06:37:14",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/4.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "开放大道1号"
    //         }
    //     },
    //     {
    //         "id": 22,
    //         "deleted": false,
    //         "createTime": "2020-03-18 02:45:50",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/5.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"mobile\": \"136\", \"weixin\": \"123456\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "天河区",
    //             "street": "天河大道1号"
    //         }
    //     },
    //     {
    //         "id": 21,
    //         "deleted": false,
    //         "createTime": "2020-03-18 02:45:50",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/6.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "海珠区",
    //             "street": "海珠大道1号"
    //         }
    //     },
    //     {
    //         "id": 19,
    //         "deleted": false,
    //         "createTime": "2020-03-18 02:45:50",
    //         "updateTime": "2020-06-15 09:48:41",
    //         "image": "assets/img/avatars/1.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"email\": \"abc@hello.com\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "番禺区",
    //             "street": "番禺大道1号"
    //         }
    //     },
    //     {
    //         "id": 18,
    //         "deleted": false,
    //         "createTime": "2020-03-18 02:45:50",
    //         "updateTime": "2020-06-18 02:45:50",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "Vue-Bootstrap",
    //         "description": "<strong>Description information</strong>",
    //         "number": 987.654321,
    //         "contacts": "{\"qq\": \"123456\", \"email\": \"abc@hello.com\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "白云区",
    //             "street": "白云大道1号"
    //         }
    //     },
    //     {
    //         "id": 13,
    //         "deleted": false,
    //         "createTime": "2020-03-16 21:46:19",
    //         "updateTime": "2020-06-16 21:46:19",
    //         "image": "assets/img/avatars/3.jpg",
    //         "text": "NEW-TWO",
    //         "description": "<strong>Description information</strong>",
    //         "number": 9.876543211234568E8,
    //         "contacts": "{\"qq\": \"123456007\", \"mobile\": \"13612345678\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "越秀区",
    //             "street": "中山大道1号"
    //         }
    //     },
    //     {
    //         "id": 12,
    //         "deleted": false,
    //         "createTime": "2020-03-17 05:31:33",
    //         "updateTime": "2020-05-17 05:31:33",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "New-ONE",
    //         "description": "<strong>Description information</strong>",
    //         "number": 1.2345678912345679E8,
    //         "contacts": "{\"mobile\": \"13812345678\", \"weixin\": \"987234\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道8号"
    //         }
    //     },
    //     {
    //         "id": 11,
    //         "deleted": false,
    //         "createTime": "2020-03-17 05:31:33",
    //         "updateTime": "2020-05-17 05:31:33",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "New-ONE",
    //         "description": "<strong>Description information</strong>",
    //         "number": 1.2345678912345679E8,
    //         "contacts": "{\"mobile\": \"13812345678\", \"weixin\": \"987234\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道8号"
    //         }
    //     },
    //     {
    //         "id": 10,
    //         "deleted": false,
    //         "createTime": "2020-03-17 05:31:33",
    //         "updateTime": "2020-05-17 05:31:33",
    //         "image": "assets/img/avatars/2.jpg",
    //         "text": "New-ONE",
    //         "description": "<strong>Description information</strong>",
    //         "number": 1.2345678912345679E8,
    //         "contacts": "{\"mobile\": \"13812345678\", \"weixin\": \"987234\"}",
    //         "address": {
    //             "country": null,
    //             "province": "广东省",
    //             "city": "广州市",
    //             "county": "黄埔区",
    //             "street": "创新大道8号"
    //         }
    //     }
    // ];

    
    const Items = {
        data() {
            return {
                items: items,
                paging:{
                    pageSize:5,
                    pageIndex:0
                },
                delIndex:-1,
                editIndex:-1,
                editItem:{
                    address:{}
                }
            }
        },
        computed: {
            pageItems() {
                starIndex=this.paging.pageIndex * this.paging.pageSize;
                endIndex=starIndex + (this.paging.pageSize - 1);//字符串运算bug
                return this.items.filter(function(item,index){
                    return index>=starIndex && index<=endIndex;
                })
            },
            totalPage(){
                return Math.ceil(this.items.length / this.paging.pageSize);
            }
        },
        methods:{
            showEditModal:function(item){
                this.editIndex=_.findIndex(this.items,item)
                this.editItem=JSON.parse(JSON.stringify(item))
                $('#form-modal').modal('show');
            },
            showDelModal:function(item){
                let index=_.findIndex(this.items,item)
                $('#confirm-modal').modal('show');
                this.delIndex=index
            },
            showMoreModal:function(item){
                $('#detail-modal').modal('show');
            },
            remove:function(){
                this.items.splice(this.delIndex,1)
            },
            save:function (item) {
                this.items[this.editIndex]=JSON.parse(JSON.stringify(item))
                $('#form-modal').modal('hide')
            }
        }
    }

    var itemsVM = Vue.createApp(Items).mount('#items-manager');

    // var itemsVM  = new Vue({
    //    el:'#items-manager',
    //    data:function(){
    //        return{
    //            items:items,
    //            pagingOptions: {
    //                pageSize: 5,
    //                pageIndex: 0
    //            }
    //        }
    //    },
    //     computed:{
    //        pageItem:function () {
    //            var startIndex = this.pagingOptions.pageSize * this.pagingOptions.pageIndex;
    //            var endIndex = startIndex + this.pagingOptions.pageSize - 1;
    //            return this.items.filter(function(value, index) {
    //                return index >= startIndex && index <= endIndex;
    //            });
    //        },
    //         pageNum:function(){
    //            return Math.ceil(this.items.length / this.pagingOptions.pageSize);
    //         },
    //
    //         // nextPage:function () {
    //         //    if(this.pagingOptions.pageIndex>=this.items.length / this.pageSize){
    //         //        return
    //         //    }
    //         //     this.pagingOptions.pageIndex += 1;
    //         // },
    //         // downPage:function () {
    //         //     if(this.pagingOptions.pageIndex<=0){
    //         //         return
    //         //     }
    //         //     this.pagingOptions.pageIndex -= 1;
    //         // }
    //     },
    //     methods: {
    //         nextPage: function () {
    //             if (this.pagingOptions.pageIndex >= (this.items.length / this.pagingOptions.pageSize) - 1) {
    //                 alert("已到尾页!");
    //                 return
    //             }
    //             this.pagingOptions.pageIndex = this.pagingOptions.pageIndex + 1;
    //         },
    //         downPage: function () {
    //             if (this.pagingOptions.pageIndex <= 0) {
    //                 alert("已到首页!");
    //                 return
    //             }
    //             this.pagingOptions.pageIndex = this.pagingOptions.pageIndex - 1;
    //         },
    //         toPage:function (value) {
    //             this.pagingOptions.pageIndex=value-1;
    //         },
    //         showNum:function (Num) {
    //             this.pagingOptions.pageSize=Num;
    //         }
    //     }
    // });

    multiplePicker = $(".multiple-select-picker").select2({
        theme: "coreui",
        placeholder: "联系方式",
        // maximumSelectionLength: 3,
        // allowClear   : true,
        closeOnSelect: false,
        tags: true
    });

    datePicker = $(".date-range-picker").daterangepicker({
        // singleDatePicker: true,
        timePicker: true,
        timePicker24Hour: true,
        opens: "left",
        locale: {
            separator: "~",
            applyLabel: "应用",
            cancelLabel: "取消",
            fromLabe: "从",
            toLabel: "到",
            weekLabel: "W",
            customRangeLabel: "自定义",
            // format          : 'YYYY-MM-DD HH:mm:SS',
            format: 'YYYY-MM-DD HH:mm',
            daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
        },
        ranges: {
            今天: [moment(), moment()],
            昨天: [moment().subtract(1, "days"), moment().subtract(1, "days")],
            最近7天: [moment().subtract(6, "days"), moment()],
            最近30天: [moment().subtract(29, "days"), moment()],
            这个月: [moment().startOf("month"), moment().endOf("month")],
            上个月: [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
        },
        buttonClasses: "btn btn-sm mx-1",
        applyButtonClasses: "btn-primary",
        cancelClass: "btn-secondary"
    });

    $cityPicker = $("#city-picker");

    $('#city-reset').click(function () {
        $cityPicker.citypicker('reset');
    });

    $('#city-destroy').click(function () {
        $cityPicker.citypicker('destroy');
    });
</script>

</body>
</html>